<template>
  <w-language>
    <a-layout class="layout-web w-body-box">
      <a-layout-header
        class="header w-body-box"
        :class="{'header-alpha': $route.path === '/'}"
        :style="{ position: 'fixed', zIndex: 1, width: '100%' }"
      >
        <w-header />
      </a-layout-header>
      <a-layout-content class="web-content">
        <nuxt />
        <a-back-top />
        <w-csrf />
        <w-statistical />
      </a-layout-content>
      <a-layout-footer>
        <w-footer/>
        <w-loading />
      </a-layout-footer>
    </a-layout>
  </w-language>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import WHeader from '@/components/web/header'
import WFooter from '@/components/web/footer'
import WCsrf from '@/components/global/csrf'
import WStatistical from '@/components/web/statistical'
import WLanguage from '@/components/global/language'
import WLoading from '@/components/global/loading'

@Component({
  name: 'LayoutWeb',
  components: {
    WHeader,
    WFooter,
    WCsrf,
    WStatistical,
    WLanguage,
    WLoading
  }
})
export default class LayoutWeb extends Vue {
}
</script>

<style lang="less">
.layout-web {
  position: relative;
  .web-content {
    min-height: calc(100vh - 150px);
  }
  .ant-layout-footer, .ant-layout-header {
    padding: 0;
  }
  .header {
    background: none;
  }
}
</style>
